<template>
    <view class="popupBox">
        <u-popup v-model="show" :mode="mode" :width="width" :height="height" :mask-close-able="maskCloseAble" :duration="duration" @open="handleOpen" @close="handleClose"
            :closeable='closeAble' :border-radius="borderRadius" :custom-style="customStyle" safe-area-inset-bottom>
            <view class="header">{{ headTitle }}</view>
            <view class="content">
                <slot></slot>
            </view>
        </u-popup>
    </view>
</template>

<script>
export default {
    name: "cu-popup",
    data() {
        return {
            show: false,
        }
    },
    props: {
        // 弹出方向 
        mode: {
            type: String,
            default: 'center'
        },
        // 是否显示关闭图标
        closeAble: {
            type: Boolean,
            default: true,
        },
        borderRadius: {
            type: Number | String,
            default: 0,
        },
        width: {
            type: String | Number,
            default: 600,
        },
        duration: {
            type: [String, Number],
			default: 250
        },
        height: {
            type: String | Number,
            default: 600,
        },
        headTitle: {
            type: String,
        },
        maskCloseAble: {
            type:Boolean,
            default: true,
        },

    },
    mounted() { },
    methods: {
        // 弹出层打开
        handleOpen() {
            console.log('弹出层打开');
            this.show = true;
            this.$emit('Open');
        },
        // 弹出层收起
        handleClose() {
            console.log('弹出层关闭');
            this.$emit('Close');
        },
    },
    computed: {
        customStyle() {
            return {
                // padding: '112rpx 80rpx 80rpx 80rpx',
                // backgroundColor:'#000',
            }
        },
    }
}
</script>

<style lang="scss" scoped>
.popupBox {
    width: 100%;
    height: 100%;

    .header {
        position: absolute;
        top: 25rpx;
        width: 100%;
        font-size: 32rpx;
        text-align: center;
        font-weight: bold;
        font-family: PingFang SC-Semibold;
        // height: 112rpx;
        // background-color: red;
    }

    .content {
        padding: 112rpx 40rpx 80rpx 60rpx;
        text-align: center;
        height: 100%;
        width: 100%;
    }
}</style>
